<template>
	<view class="container">
		<view class="content">
			<view class="title f-a-center">账号注销
				<image src="/static/mine/icon-cry.png" class="icon-cry"></image>
			</view>
			<view class="word">很遗憾，美林娜农业无法继续为你提供服务，感谢你一直以来的陪伴。注销账号前，我们需要对以下信息进行审核，以保证你的账号安全。</view>
			<view class="list">
				<view class="item">（1）账户内无未使用余额</view>
				<view class="item">（2）账户内无未完成的订单</view>
				<view class="item">（3）账户当前为有效账户，非冻结状态</view>
			</view>
		</view>

		<view class="check-box">
			<u-checkbox-group>
				<u-checkbox v-model="checked" activeColor="#FFC046" inactiveColor="#FFC046" label="已阅读并同意" size="32rpx"
					labelSize="32rpx" labelColor="#666666" bgColor="transparent" @change="checkChange"></u-checkbox>
				<span class="link" @click="goOffPage">《蜂润农APP账号注销须知》</span>
			</u-checkbox-group>
		</view>

		<u-button :disabled="!checked" :customStyle="customButtonStyle" @click="logOffBtn">申请注销</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				customButtonStyle: {
					width: '91%',
					height: '76rpx',
					background: '#FFC046',
					borderRadius: '35rpx',
					margin: '38rpx auto 0',
					fontWeight: ' 400',
					fontSize: '32rpx',
					color: '#FFFFFF',
					boxSizing: 'border-box',
				}
			}
		},
		methods: {
			checkChange(e) {
				console.log(e);
				this.checked = e
			},

			//注销须知
			goOffPage() {
				uni.navigateTo({
					url: '/pages/webview/index?type=zxxz&title=账号注销须知'
				})
			},

			logOffBtn() {
				this.$api.get_user_zhuxiao().then(res => {
					this.$showToast('注销成功')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 800)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>

<style lang="scss" scoped>
	.content {
		padding: 28rpx 40rpx 50rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.11);

		.title {
			font-weight: 500;
			font-size: 48rpx;
			color: #666666;

			.icon-cry {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin-left: 16rpx;
			}
		}

		.word {
			font-weight: 400;
			font-size: 34rpx;
			color: #666666;
			margin-top: 24rpx;
		}

		.list {
			padding: 46rpx 6rpx 0 8rpx;

			.item {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				padding: 28rpx 0;
				border-bottom: 1px solid #CCC8C1;

				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}

	.check-box {
		padding: 40rpx 0 0 48rpx;

		.link {
			font-weight: 400;
			font-size: 32rpx;
			color: #2D91FB;
		}
	}

	.btn-logoff {
		width: 91%;
		height: 70rpx;
		background: #FFC046;
		border-radius: 35rpx;
		margin: 38rpx auto 0;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		box-sizing: border-box;
	}
</style>